<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=0.45, user-scalable=yes">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="/CampusCats/js/userMsg.min.js"></script>
    <title>记录提交审核</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        table {
            caption-side: top;
        }
    </style>
</head>
<body>
<h2 id="headText" style="margin-left: 0.5%;margin-top: 0.3%"></h2>
<hr>
<div id="app">
    <input type="button" class="btn btn-primary btn-sm"
           onclick="location.href = '/CampusCats/home'" value="回主页" style="margin-left: 0.5%">
    <input type="button" class="btn btn-primary btn-sm" id="flush" @click="flush(true)" value="刷新">
    <hr>
    <div id="opSuccess" v-if="success" style="margin-left: 0.5%">
        <p>操作已成功！</p>
        <hr>
    </div>
    <div id="opFailed" v-if="failed" style="margin-left: 0.5%">
        <p>其他管理员已完成审核！</p>
        <hr>
    </div>
    <div id="feedingDiv">
        <input type="button" class="btn btn-primary btn-sm" style="margin-left: 0.5%"
               onclick="window.open('/CampusCats/records?type=feeding')" value="查看全部投喂记录">
        <table id="feedingTable" class="table table-striped">
            <caption style="margin-left: 0.5%">全部投喂记录</caption>
            <tr>
                <th>编号</th>
                <th>猫咪</th>
                <th>操作用户</th>
                <th>投喂位置</th>
                <th>投喂时间</th>
                <th>食物</th>
                <th>上次更新时间</th>
                <th>用户操作行为</th>
                <th>操作</th>
            </tr>
            <tr v-for="feeding in feedings.data">
                <td>{{feeding.recordId}}</td>
                <td>{{feeding.catName}}</td>
                <td>{{feeding.username}}</td>
                <td>{{feeding.location}}</td>
                <td>{{feeding.recordTime}}</td>
                <td>{{feeding.remarks}}</td>
                <td>{{feeding.lastUpdate}}</td>
                <td v-if="feeding.formerId === -1">添加</td>
                <td v-if="feeding.formerId !== -1">修改</td>
                <td>
                    <input type="button" @click="pas('feeding', feeding.recordId)" class="btn btn-primary btn-sm" value="通过">
                    <input type="button" @click="rej('feeding', feeding.recordId)" class="btn btn-primary btn-sm" value="驳回">
                </td>
            </tr>
        </table>
    </div>
    <hr>
    <div id="appearanceDiv">
        <input type="button" class="btn btn-primary btn-sm" style="margin-left: 0.5%"
               onclick="window.open('/CampusCats/records?type=appearance')" value="查看全部出现记录">
        <table id="appearanceTable" class="table table-striped">
            <caption style="margin-left: 0.5%">全部出现记录</caption>
            <tr>
                <th>编号</th>
                <th>猫咪</th>
                <th>操作用户</th>
                <th>出现位置</th>
                <th>出现时间</th>
                <th>上次更新时间</th>
                <th>用户操作行为</th>
                <th>操作</th>
            </tr>
            <tr v-for="appearance in appearances.data">
                <td>{{appearance.recordId}}</td>
                <td>{{appearance.catName}}</td>
                <td>{{appearance.username}}</td>
                <td>{{appearance.location}}</td>
                <td>{{appearance.recordTime}}</td>
                <td>{{appearance.lastUpdate}}</td>
                <td v-if="appearance.formerId === -1">添加</td>
                <td v-if="appearance.formerId !== -1">修改</td>
                <td>
                    <input type="button" @click="pas('appearance', appearance.recordId)" class="btn btn-primary btn-sm" value="通过">
                    <input type="button" @click="rej('appearance', appearance.recordId)" class="btn btn-primary btn-sm" value="驳回">
                </td>
            </tr>
        </table>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            feedings: {},
            appearances: {},
            success: false,
            failed: false
        },
        async mounted() {
            await userMsg('');
            await this.flush(true);
        },
        methods: {
            async flush(clear) {
                this.feedings = (await myAxios.get('/admin/records/feeding')).data;
                if (this.feedings.code !== 20021) {
                    alert("错误：" + this.feedings.msg + "\n错误代码：" + this.feedings.code);
                }
                this.appearances = (await myAxios.get('/admin/records/appearance')).data;
                if (this.appearances.code !== 20021) {
                    alert("错误：" + this.appearances.msg + "\n错误代码：" + this.appearances.code);
                }
                if (clear) {
                    this.success = this.failed = false;
                }
            },
            async pas(recordType, id) {
                let a = (await myAxios.get('/admin/records/' + recordType + '/' + id)).data;
                if (a.code === 20031) {
                    this.success = true;
                    this.failed = false;
                } else if (a.code === 20030) {
                    this.success = false;
                    this.failed = true;
                } else {
                    this.success = this.failed = false;
                    alert("错误：" + a.msg + "\n错误代码：" + a.code);
                }
                await this.flush(false);
            },
            async rej(recordType, id) {
                let a = (await myAxios.delete('/admin/records/' + recordType + '/' + id)).data;
                if (a.code === 20041) {
                    this.success = true;
                    this.failed = false;
                } else if (a.code === 20040) {
                    this.success = false;
                    this.failed = true;
                } else {
                    this.success = this.failed = false;
                    alert("错误：" + a.msg + "\n错误代码：" + a.code);
                }
                await this.flush(false);
            }
        }
    });
</script>
</body>
</html>